<template>
  <div id="mainDiv">
    <navi></navi>
    <info></info>

    <div id="skills">
      <div class="infonavi">
        <ul>
          <li>全部功能
            <ul>
              <li>我的预约</li>
              <li>下单记录</li>
              <li>我的收藏</li>
              <li>浏览记录</li>

            </ul>
          </li>
        </ul>
      </div>

      <div class="orderInfo">
        <!--          <span>订单号</span>-->
        <div>
        <span></span>
        <span>餐厅</span>
        <span>餐厅名称</span>
        <span>下单日期</span>
        <span>结束日期</span>
        <span>价格</span>
          <span>状态</span>
        </div>
      </div>

      <div class="orderInfo" v-for="(order,orderindex) in user.orderForms">
        <div>
          <!--          <span>{{order.urno}}</span>-->
          <span @click="showorderitem(orderindex)">+</span>
          <span class="orderimg"><img :src="getImgUrl(order.restaurant.rimg)"></span>
          <span>{{ order.restaurant.rname }}</span>
          <span>{{ procesDate(order.uresdate) }}</span>
          <span>{{ procesDate(order.uresendDate) }}</span>
          <span>{{ order.uresprice }}</span>
          <span @click="procesState(order)"> {{ order.uresState }}</span>
        </div>

        <div class="orderItem" v-show="orderindex==currOrderindex">
          <ul>
            <li></li>
            <li v-for="(orderformitem,orderformitemIndex) in order.orderformitems">
              <span> {{ (orderformitemIndex + 1) }}</span>
              <span>{{ orderformitem.oiname }}</span>
              <span>{{ orderformitem.oidesc }}</span>
            </li>
          </ul>
        </div>
      </div>


    </div>
    <el-date-picker type="date" placeholder="选择日期" v-model="begindate" style="width:880px;padding: 0;position: absolute"
                    @change="getFreeRestaurant()"></el-date-picker>
    <div id="orders">

      <div class="restaurantInfo" v-for="(restaurant,restaurantIndex) in restaurants"
           @click="showSchedule(restaurant.rno)">
        <ul>
          <li><img :src="getImgUrl(restaurant.rimg)"></li>
          <li>{{ restaurant.rname }}</li>
          <li style="height: 16px">{{ restaurant.riddr }}</li>
        </ul>
      </div>

    </div>
    <div id="projectdesc"></div>
    <pay v-if="payDialogIsShow" ref="showPay"></pay>
    <schedule v-if="scheduleDialogIsShow" ref="showSchedule"></schedule>
  </div>
</template>

<script>
  import api from "../../../../axios/api"
  import utilsFD from "../../../../static/js/utils/index.js"
  import schedule from '@/components/front/user/schedule.vue'
  import pay from '@/components/front/user/pay.vue'
  import navi from '@/components/front/user/navi.vue'
  import info from '@/components/front/user/info.vue'
  import utils from "../../../../static/js/utils/utils.js"
  import myfooter from '@/components/public/footer.vue'

  export default {
    name: "",
    data() {
      return {
        user: {"uno": ""},
        pics: [],
        restaurants: [],
        ano: "",
        currOrderindex: -1,
        begindate: utilsFD.FD.Fd().initCNDate(new Date()),

        //enddate :utilsFD.FD.Fd().getMonthBeforeFormatAndDay(1,"-",new Date().getDay()),
        resDate: [
          //{"date":"2021-04-26","content":"放假"}
        ], //样本数据
        payDialogIsShow: false,
        scheduleDialogIsShow: false
      }

    },
    components: {
      schedule, pay, navi, info,myfooter
    },
    methods: {
      procesState(order) {
        if (order.uresState == "待付款") {
          let _this = this;
          _this.payDialogIsShow = true;
          _this.$nextTick(() => {
            // console.log(this.resDate)
            this.$refs.showPay.init(order);
          })
        }
      },
      showPay: function () {

      },
      showSchedule: function (rno) {
        //alert(date);
        let _this = this;
        _this.scheduleDialogIsShow = true;
        _this.$nextTick(() => {
          _this.resDate = "";
          _this.getResOrder(rno);

          // console.log(this.resDate)

        })
      },
      showorderitem(orderindex) {
        this.currOrderindex = orderindex;
      },
      procesDate(date) {
        return utilsFD.FD.Fd().initCNDateFromlong(date);
      },
      procesTime(time) {
        return utilsFD.FD.Fd().initCNTime(new Date(time));
      },
      getImgUrl: function (rpic) {
        return   "/api/upload/images/restaurant/" + rpic;
      },
      getUser: function () {
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/api/userController/getUsersWithOrders/"+this.uno , null, "post")
          .then(dto => {
            console.log(dto);
            this.user = dto.t;

          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）

      },
      getResOrder: function (rno) {
        let _this = this;
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/api/restaurantController/selectRestaurantWithorderAndUser/" + rno, null, "post")
          .then(dto => {

            let orderForms = dto.t.orderForm;

            var resDate = new Array();
            for (let index in orderForms) {
              let order = orderForms[index]
              let begginDate = new Date(order.uresdate);
              let endDate = new Date(order.uresendDate);
              //console.log(begginDate+"------------" + endDate)
              while ((endDate.getTime() - begginDate.getTime()) >= 0) {
                let year = begginDate.getFullYear();
                let month = begginDate.getMonth().toString().length == 1 ? "0" + (begginDate.getMonth() + 1).toString() : (begginDate.getMonth() + 1);
                let day = begginDate.getDate().toString().length == 1 ? "0" + begginDate.getDate() : begginDate.getDate();
                // console.log(year+"-"+month+"-"+day);
                begginDate.setDate(begginDate.getDate() + 1);
                let orderDay = {"date": year + "-" + month + "-" + day, "content": "已定"}
                resDate.push(orderDay);
              }
              //  console.log(order)

            }
            this.resDate = resDate;
            //console.log(resDate)
            console.log("-----9999999999999--------")
            // console.log(this.resDate)
            console.log(this.user);
            this.$refs.showSchedule.init(this.begindate, this.resDate, rno, this.user.uno, this.user);
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）

      },
      getOrderCookie() {
        // api.setDataFromAxios("/api/userController/getOrderCookie/"+this.user.uno, null, "post")
        //   .then(dto => {
        //     console.log(dto)
        //     if(dto.code==200){
        //       this.user = dto.t;
        //
        //       console.log(this.user)
        //     }else{
        //       this.getUser();
        //     }
        //   });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）'
        this.getUser()
      },
      getFreeRestaurant() {

        this.begindate = utilsFD.FD.Fd().initCNDate(new Date(this.begindate))

        api.setDataFromAxios("/api/restaurantController/getFreeRestaurantByDate/" + this.begindate, null, "get")
          .then(dto => {
            console.log(dto)
            if (dto.code == 200) {
              this.restaurants = dto.tList;
            }else if(dto.code == 302) {
              // this.$message.warning("请先登录")
              this.$router.push('/login')
            }
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      }
    },
    created() {
      //this.getUser();
      this.uno = this.$route.params.uno;
      if (this.uno == undefined || this.uno == null || this.uno == '') {
        this.uno = localStorage.getItem('uno');
      }
      //1.创建页面的时候 调用自定义的数据请求方法  而数据请求方法把得到数据赋值给了当前页面的变量
      // this.getAllCourse();
      this.getOrderCookie();
      this.getFreeRestaurant();


    }
  }
</script>

<style type="text/css">


  .infonavi {
    float: left;;
    width: 120px;
    height: 100%;
  }

  .infonavi > ul {

    padding: 0;
    width: 120px
  }

  .infonavi > ul > li {
    padding:0;
    width: 120px;
    margin: 40px 0 0 0;
    list-style: none
  }
  .infonavi > ul > li > ul{
    padding: 0;
  }
  .infonavi > ul > li > ul> li{

    margin: 20px; width:100px; list-style: none}







    /*margin表示到外边框，上一层元素的距离，最外层的div的上一层元素就是body，到左和右都为auto 就表示水平居中*/
  #mainDiv {
    border: solid 0px;
    width: 1000px;

    margin-left: auto;
    margin-right: auto;
    font-family: "微软雅黑";
  }

  #skills {
    height: 300px;
    position: relative;

  }
  #skills  :after{clear: both;content: "";display: block};

  #skills > p {
    background-color: red;
    width: 100px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    color: white;
    border-radius: 4px 4px 0px 0px
  }

  #skills > hr {
    width: 560px;
    position: absolute;
    top: 16px;
    border: solid 1px red;
  }

  /*调整线的颜色*/
  #skills > ul > li {
    list-style-type: none;
    margin-top: 5px;
  }

  #skills > ul > li > span {
    height: 26px;
    display: inline-block;
  }

  #skills > ul > li > span:nth-child(1) {
    width: 120px;
  }

  #skills > ul > li > span:nth-child(2) {
    width: 120px;
  }

  #skills > ul > li > span:nth-child(3) {
    width: 60px;
  }

  #photo > img {
    width: 80px;
    height: 120px;
  }

  .orderInfo {
    float: left;
    width: 880px;
  }

  .orderInfo span {
    display: inline-block;
    height: 40px;
    line-height: 30px;
    vertical-align: middle;
    font-family: "微软雅黑";
    font-size: 14px;
    text-align: center;
    padding: 0 20px
  }
  .orderInfo > div > span:nth-child(1) {
    width: 10px
  }
  .orderInfo > div > span:nth-child(2) {
    width: 40px
  }

  .orderInfo > div > span:nth-child(3) {
    width: 60px
  }

  .orderInfo > div > span:nth-child(4) {
    width: 100px
  }

  .orderInfo > div > span:nth-child(5) {
    width: 100px
  }

  .orderInfo > div > span:nth-child(6) {
    width: 100px
  }

  .orderInfo > div > span:nth-child(7) {
    width: 50px
  }

  .orderItem > ul {
    margin: 0;
    padding: 0;
  }

  .orderItem > ul > li {
    list-style: none;
  }

  .restaurantInfo {
    float: left;
    margin-left: 120px;
    margin-top: 40px;
    width: 100px
  }

  .restaurantInfo ul {
    margin: 0;
    padding: 0
  }

  .restaurantInfo ul li img {

    width: 100px;
    height: 100px
  }

  .restaurantInfo li {
    list-style: none;
    text-align: center;
    font-family: "微软雅黑";
    font-size: 14px;
    padding-top: 6px
  }

  .imgDiv {
    width: 80px;
    height: 80px
  }

  .imgDiv > img {
    width: 80px;
    height: 80px
  }

  .orderimg > img {
    width: 30px;
    height: 30px
  }


</style>
